<template>
    <n-spin size="large" :show="loading">
        <n-form ref="formRef" label-placement="left">
            <n-grid :cols="30" :x-gap="24">
                <n-form-item-gi :span="15" label="城市">
                    <City v-model:value="city"></City>
                </n-form-item-gi>
                <n-form-item-gi :span="15" v-if="init">
                    <n-text type="success" v-if="summ.operate">该城市已开通服务</n-text>
                    <n-text type="warning" v-else>该城市尚未开通</n-text>
                </n-form-item-gi>
            </n-grid>
        </n-form>

        <n-scrollbar :style="{ maxHeight: height }" v-if="init">
            <n-grid :cols="24" :x-gap="24" :y-gap="24">
                <n-gi :span="12">
                    <n-card>
                        <n-space vertical :size="48">
                            <n-statistic label="门店统计">
                                <span :style="{ fontSize: '14px' }">共</span>
                                {{ summ.merchant.total }}
                                <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">家/活跃</span>
                                {{ summ.merchant.active }}
                                <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">家/不活跃</span>
                                {{ summ.merchant.total - summ.merchant.active }}
                                <span :style="{ fontSize: '14px' }">家</span>
                            </n-statistic>
                            <div id="echarts-mch-div" :style="{ width: '100%', height: '400px' }"></div>
                        </n-space>
                    </n-card>
                </n-gi>
                <n-gi :span="12">
                    <n-card>
                        <n-space vertical :size="48">
                            <n-statistic label="人员统计">
                                <span :style="{ fontSize: '14px' }">共</span>
                                {{ summ.clerk.total }}
                                <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">人/活跃</span>
                                {{ summ.clerk.active }}
                                <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">人/不活跃</span>
                                {{ summ.clerk.total - summ.clerk.active }}
                                <span :style="{ fontSize: '14px' }">人</span>
                            </n-statistic>
                            <div id="echarts-clerk-div" :style="{ width: '100%', height: '400px' }"></div>
                        </n-space>
                    </n-card>
                </n-gi>
            </n-grid>
        </n-scrollbar>
    </n-spin>
</template>

<script lang="ts" setup>
import City from '@/comp/func/City.vue'
import { useStore } from '@/store'
import { computed, nextTick, onActivated, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { Http } from '@/libs'
const echart = echarts

const store = useStore()
const loading = computed(() => store.state.loading.flag)
const height = computed(() => store.state.browser.innerHeight - 220 + 'px')

const init = ref<boolean>(false)

const formRef = ref<any>(null)

const summ = ref<any>()

const city = ref<any>()

watch(city, (nv, _ov) => {
    execLoadData(nv)
})

const execLoadData = (cityCode: any) => {
    init.value = false
    Http.post('/ops/stat/biz/merchant/active/summary', { city: cityCode + '' }).then(async resp => {
        if (resp.stat.err > 0) {
            return
        }
        summ.value = resp.data
        init.value = true
        await nextTick()
        initMchChart()

        initClerkChart()
    })
}
let mchChart: any

const initMchChart = () => {
    mchChart = echart.init(document.getElementById('echarts-mch-div') as HTMLElement, (localStorage.getItem('App.Theme.Dark') || '') == 'true' ? 'dark' : '')
    // 把配置和数据放这里
    mchChart.setOption({
        title: {
            text: '门店活跃度',
            left: 'center',
        },
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '合计数量',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: summ.value.merchant.active, name: '活跃' },
                    { value: summ.value.merchant.total - summ.value.merchant.active, name: '不活跃' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
        ],
    })
    window.onresize = function () {
        //自适应大小
        mchChart.resize()
    }
}

let clerkChart: any
const initClerkChart = () => {
    clerkChart = echart.init(document.getElementById('echarts-clerk-div') as HTMLElement, (localStorage.getItem('App.Theme.Dark') || '') == 'true' ? 'dark' : '')
    // 把配置和数据放这里
    clerkChart.setOption({
        title: {
            text: '人员活跃度',
            left: 'center',
        },
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '合计数量',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: summ.value.clerk.active, name: '活跃' },
                    { value: summ.value.clerk.total - summ.value.clerk.active, name: '不活跃' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
        ],
    })
    window.onresize = function () {
        //自适应大小
        clerkChart.resize()
    }
}

onActivated(() => {})
</script>
